<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图的实现</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
    text-decoration: none;
  }
  li {
    list-style: none;
  }

  img {
    width: 250px;
    height: 250px;
  }
  p {
    width: 200px;
    height: 20px;
    text-align: center;
  }
  ul {
    display: flex;
    margin-left: 40px;
    margin-top: 10px;
    align-items: center;
    overflow:hidden;

  }
  ul li {
    float: left;
    width: 14px;
    height: 14px;
    margin: 0 10px;
    border-radius: 50%;
    opacity: 0.4;
    background-color: gray;
  }
  .active {
      width: 18px;
      height: 18px;
    background-color: pink;
      opacity: 1;


  }
  .box {
      position: relative;
      width: 250px;
      margin: 40px auto;

  }
  .left {
      color: white;
      width: 20px;
      height: 30px;
      background-color: darkgray;
      position: absolute;
      line-height: 30px;
      top: 115px;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      text-align: center;
  }
  .right {
      color: white;
      position: absolute;
      line-height: 30px;
      text-align: right;
      width: 20px;
      height: 30px;
      background-color: darkgray;
      top: 115px;
      left: 230px;
      border-radius: 20px 0 0 20px;

  }
  .right:hover{
      background-color: gray;
  }
  .left:hover{
      background-color: gray;
  }
</style>
<body>
<div class="box">
    <a href="#" class="right"> > </a>
    <a href="#" class="left"> < </a>
    <img src="img/beauty.jpg" alt="美女图片">
    <p>河北菜花</p>
    <ul>
    <li class="active"></li>
    <li></li>
    <li></li>
    </ul>
</div>
<script>
    let data = [
        {url:'img/beauty.jpg',text:"河北菜花"},
        {url:'img/img.png',text:"神木桐"},
        {url:'img/img_1.png',text:"stranger"}
    ]
    // 点击切换
    let i = 0
    const  right = document.querySelector(".right")
    const  left = document.querySelector(".left")
    const  img = document.querySelector("img")
    const p = document.querySelector("p")
    // 左边切换按钮的实现
    right.addEventListener("click",function (){
        i++
        i = i >= data.length ? 0 : i  // 三元表达时方法
        // if (i >= data.length){
        //     i = 0
        // }
        img.src = data[i].url
        p.innerHTML = data[i].text
        document.querySelector('.active').classList.remove("active")
        document.querySelector(`ul li:nth-child(${i+1})`).classList.add("active")

    })
    // 右边切换按钮的实现
    left.addEventListener("click",function (){
        i--
        i = i < 0 ? data.length -1 : i
        img.src = data[i].url
        p.innerHTML = data[i].text
        document.querySelector('.active').classList.remove("active")
        document.querySelector(`ul li:nth-child(${i+1})`).classList.add("active")

    })
    // 定时器执行操作
    let n = setInterval(function () {
        right.click()
    },2000)
    // 鼠标放上去停止
    img.addEventListener("mouseenter",function (){
        clearInterval(n)
    })
    // 鼠标离开又继续
    img.addEventListener("mouseleave",function (){
        n = setInterval(function () {
            right.click()
        },2000)
    })

</script>
</body>
</html>